<template>
    <el-container class="content settle-sub-box">
        <el-main>
            <el-container class="white-block box full" v-loading="loading">
                <el-header :height="'auto'">
                    <breadcrumb :title="'待办事项'" :noBack="true" ref="breadcrumb"></breadcrumb>
                    <div class="toolbar">
                        <div>
                            <el-radio-group v-model="state" class="state" @change="getList(1)">
                                <el-radio-button label="0">待处理</el-radio-button>
                                <el-radio-button label="1">已处理</el-radio-button>
                            </el-radio-group>
                        </div>
                        <div class="text-right">
                            <el-input v-model="key" placeholder="请输入姓名、手机号" class="input" clearable></el-input>
                            <el-button type="primary" @click="getList(1)">查询</el-button>
                        </div>
                        <div class="text-right right">
                            <el-button class="primary" @click="dataExport()">导出</el-button>
                            <el-button @click="back">返回</el-button>
                        </div>
                    </div>
                    <div class="tabs">
                        <div :class="{active: tab==1}" @click="changeBacklog(1)"><span>探视申请</span></div>
                        <div :class="{active: tab==2}" @click="changeBacklog(2)"><span>陪护关联</span></div>
                    </div>
                </el-header>
                <el-main class="mt10">
                    <template v-if="tab==1">
                        <table-example ref="table" :data="visitTableData" :tableColumn="visitHeader" :height="'100%'"
                                       :slotColumns="slotColumns">
                            <template slot="operation" slot-scope="scope">
                                <div class="operation">
                                    <template v-if="scope.row.result">
                                        <span v-if="scope.row.result==1" class="error">已拒绝</span>
                                        <span v-else-if="scope.row.result==2">已同意</span>
                                    </template>
                                    <template v-else>
                                        <el-link type="primary" :underline="false" @click="dispose(scope.row,2)">同意
                                        </el-link>
                                        <el-link type="primary" class="error" :underline="false"
                                                 @click="dispose(scope.row,1)">拒绝
                                        </el-link>
                                    </template>
                                </div>
                            </template>
                        </table-example>
                    </template>
                    <template v-else>
                        <table-example ref="table" :data="tableData" :tableColumn="header" :height="'100%'"
                                       :slotColumns="slotColumns">
                            <template slot="operation" slot-scope="scope">
                                <div class="operation">
                                    <template v-if="scope.row.result">
                                        <span v-if="scope.row.result==1" class="error">已拒绝</span>
                                        <span v-else-if="scope.row.result==2">已同意</span>
                                    </template>
                                    <template v-else>
                                        <el-link type="primary" :underline="false" @click="dispose(scope.row,2)">同意
                                        </el-link>
                                        <el-link type="primary" class="error" :underline="false"
                                                 @click="dispose(scope.row,1)">拒绝
                                        </el-link>
                                    </template>
                                </div>
                            </template>
                        </table-example>
                    </template>
                </el-main>
                <el-footer :height="'auto'" class="mt20">
                    <page :data="page" @jumpPage="getList"></page>
                </el-footer>
            </el-container>
            <dialog-msk :show.sync="showReason" title="填写拒绝理由" :width="'450px'" @save="saveReason"
                        @cancel="closeDialog" :toBody="false"
                        v-loading="dialogLoading"
                        element-loading-background="rgba(0, 0, 0, 0.3)">
                <el-form class="form-common" :model="reasonForm" :rules="reasonRules" ref="reasonForm"
                         size="small" :label-position="'left'">
                    <el-form-item>
                        <el-input v-model="reasonForm.reason" size="small"
                                  placeholder="请填写拒绝理由"
                                  :autosize="{ minRows: 3, maxRows: 3}"
                                  type="textarea" maxlength="50" show-word-limit></el-input>
                    </el-form-item>
                </el-form>
            </dialog-msk>
        </el-main>
    </el-container>
</template>

<script>
    import tableExample from '../components/table'
    import page from '../components/pagination'
    import breadcrumb from '../components/breadcrumb'
    import dialogMsk from '../components/dialog'

    export default {
        data() {
            return {
                key: '', // 姓名
                state: '0',
                tableData: [], // 陪护表格
                visitTableData: [], // 探视表格
                visitHeader: [
                    {
                        prop: 'sickbedNumber',
                        label: '床位号',
                        minWidth: '150',
                        align: 'center'
                    },
                    {
                        prop: 'patientName',
                        label: '患者姓名',
                        minWidth: '100',
                        align: 'center'
                    },
                    {
                        prop: 'visitName',
                        label: '申请人',
                        minWidth: '100',
                        align: 'center'
                    },
                    {
                        prop: 'phone',
                        label: '申请人手机号',
                        minWidth: '100',
                        align: 'center'
                    },
                    {
                        prop: 'visitStartTime',
                        label: '探视时间',
                        align: 'center',
                        minWidth: '180'
                    },
                    {
                        prop: 'createTime',
                        label: '申请时间',
                        align: 'center',
                        minWidth: '150'
                    },
                    {
                        prop: 'operation',
                        label: '操作',
                        align: 'center',
                        minWidth: '150'
                    }
                ],
                header: [
                    {
                        prop: 'sickbedNumber',
                        label: '床位号',
                        minWidth: '150',
                        align: 'center'
                    },
                    {
                        prop: 'patientName',
                        label: '患者姓名',
                        minWidth: '100',
                        align: 'center'
                    },
                    {
                        prop: 'escortName',
                        label: '申请人',
                        minWidth: '100',
                        align: 'center'
                    },
                    {
                        prop: 'phone',
                        label: '申请人手机号',
                        minWidth: '100',
                        align: 'center'
                    },
                    {
                        prop: 'createTime',
                        label: '申请时间',
                        align: 'center',
                        minWidth: '150'
                    },
                    {
                        prop: 'operation',
                        label: '操作',
                        align: 'center',
                        minWidth: '150'
                    }
                ],
                slotColumns: ['operation'],
                page: {},
                index: 1,
                loading: false,
                tab: 1, // 待办事项类型
                showReason: false, // 显示拒绝理由弹窗
                currentRow: null, // 当前所选行数据
                reasonForm: {
                    reason: ''
                },
                reasonRules: {
                    reason: [
                        // {required: true, message: '请输入拒绝理由', trigger: 'blur'}
                    ]
                },
                dialogLoading: false // 弹窗遮罩
            }
        },
        mounted() {
            // this.searchTime = this.$filter.timeFormat(null, 'YYYY-MM-DD HH:mm:ss')
            this.changeBacklog(this.tab)
        },
        methods: {
            // 获取列表数据
            getList(index) {
                this.loading = true
                if (index) this.index = index
                let url = '/todaySituation/backlogEscortApplyPage'
                if (this.tab === 1) url = '/todaySituation/backlogVisitApplyPage'
                this.$http.get(url, {
                    condition: this.key,
                    current: this.index || 1,
                    size: 15,
                    result: this.state
                }).then(result => {
                    this.loading = false
                    if (result.success) {
                        if (this.tab === 1) {
                            this.visitTableData = result.data.records
                            this.tableData = []
                        } else {
                            this.tableData = result.data.records
                            this.visitTableData = []
                        }
                        this.page = result.data
                        delete this.page['records']
                    }
                }).catch(() => {
                    this.loading = false
                })
            },
            // 切换处理状态
            changeBacklog(type) {
                if (type) {
                    this.tab = type
                    if (type === 1) {
                        this.tableData = []
                    } else {
                        this.visitTableData = []
                    }
                }
                this.getList()
            },
            // 返回
            back() {
                this.$emit('upload')
                if (this.$refs.breadcrumb) this.$refs.breadcrumb.back()
            },
            // 导出表格
            dataExport() {
                let url = '/todaySituation/backlogVisitApplyExcel', // 探视
                    params = {
                        condition: this.key,
                        result: this.state
                    }
                if (this.tab === 2) url = '/todaySituation/backlogEscortApplyExcel'
                window.open(location.origin + this.$filter.appendUrlParams('/_api' + url, params), '_blank')
            },
            // 同意/拒绝
            dispose(row, type) {
                let _this = this
                if (type === 1) {
                    this.showReason = true
                    this.currentRow = row
                } else {
                    this.$method.messageBox('confirm', '确定同意申请吗?', (action, instance) => {
                        if (action === 'confirm') {
                            _this.$http.post('/todaySituation/backlogDispose', {
                                id: row.noticeId,
                                result: type
                            }).then(result => {
                                _this.getList()
                            })
                        }
                    }, '', false, false)
                }
            },
            validate(formName, callback) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        if (callback) callback()
                    } else {
                        return false
                    }
                })
            },
            // 拒绝弹窗保存
            saveReason() {
                let _this = this
                this.validate('reasonForm', () => {
                    if (_this.currentRow) {
                        _this.dialogLoading = true
                        _this.$http.post('/todaySituation/backlogDispose', {
                            id: _this.currentRow.noticeId,
                            result: 1,
                            reason: _this.reasonForm.reason
                        }).then(result => {
                            _this.dialogLoading = false
                            if (result.success) {
                                _this.closeDialog()
                                _this.changeBacklog(_this.tab)
                            }
                        }).catch(() => {
                            _this.dialogLoading = false
                        })
                    }
                })
            },
            closeDialog() {
                if (this.$refs.reasonForm) this.$refs.reasonForm.resetFields()
                this.showReason = false
                this.currentRow = null
            }
        },
        components: {
            tableExample,
            page,
            breadcrumb,
            dialogMsk
        }
    }
</script>

<style scoped lang="less">
    .content {
    }

    .toolbar {
        /deep/ .state {
            .el-radio-button__inner {
                border-color: #428CFF;
                padding: 12px 15px;
                color: #999;
            }

            .el-radio-button {
                &.is-active {
                    .el-radio-button__inner {
                        color: #fff;
                    }
                }

                &:first-child {
                    .el-radio-button__inner {
                        border-radius: 8px 0 0 8px;
                    }
                }

                &:last-child {
                    .el-radio-button__inner {
                        border-radius: 0 8px 8px 0;
                    }
                }

                &:focus:not(.is-focus):not(:active):not(.is-disabled) {
                    box-shadow: none;
                }
            }

        }

        .input {
            width: 320px;

            .el-input__inner {
                border-color: rgba(0, 0, 0, .15);
            }
        }

        .right {
            flex: none;
            width: 200px;

            .el-button {
                /*border-width: 2px;*/
                /*padding-top: 11px;*/
                /*padding-bottom: 11px;*/
            }
        }
    }

    .tabs {
        margin: 20px 0 0 15px;
        overflow: hidden;

        div {
            margin: 0 28px;
            float: left;

            span {
                display: inline-block;
                line-height: 36px;
                color: #999;
                vertical-align: top;
                cursor: pointer;
                position: relative;
            }

            &.active {
                span {
                    color: #428CFF;

                    &:after {
                        content: '';
                        position: absolute;
                        bottom: 0;
                        left: 0;
                        width: 100%;
                        height: 4px;
                        background-color: #428CFF;
                        border-radius: 2px;
                    }
                }
            }
        }
    }

    .operation {
        span {
            font-size: 14px;
        }
    }
</style>
